<template>
  <Card :bordered="false">
    <p slot="title">
      <Icon type="ios-thunderstorm"></Icon>
      权限组
    </p>
    <a href="#" slot="extra" @click.prevent="createView">
      <Icon type="md-add-circle"></Icon>
      创建
    </a>
    <Modal v-model="createModal" :width="800" draggable scrollable :title="view_title" @on-ok="addAuthGroup">
      <div style="padding: 0px 40px 20px;  height:650px; overflow-y: scroll; color:#17233d;">
        <Form ref="addAuthGroupForm" :model="addAuthGroupForm" :label-width="100">
          <FormItem label="权限组名称" prop="groupname">
            <Input v-if=update_status disabled v-model="addAuthGroupForm.groupname" placeholder="Enter your new group name"></Input>
            <Input v-else v-model="addAuthGroupForm.groupname" placeholder="Enter your new group name"></Input>
          </FormItem>
          <template>
            <Divider dashed>我的工单</Divider>
            <FormItem label="主权限:">
              <RadioGroup v-model="permission.parent.work_order" style="margin-right:50px">
                <Radio label="1">可见</Radio>
                <Radio label="0">不可见</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="我的工单:">
              <RadioGroup v-model="permission.child.work_order_audit" style="margin-right:50px">
                <Radio label="1">可审核</Radio>
                <Radio label="0">不可审核</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.work_order_create" style="margin-right:50px">
                <Radio label="1">可创建</Radio>
                <Radio label="0">不可创建</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.work_order_delete" style="margin-right:50px">
                <Radio label="1">可删除</Radio>
                <Radio label="0">不可删除</Radio>
              </RadioGroup>
            </FormItem>
          </template>
          <template>
            <Divider dashed>文件管理</Divider>
            <FormItem label="主权限:">
              <RadioGroup v-model="permission.parent.files" style="margin-right:50px">
                <Radio label="1">可见</Radio>
                <Radio label="0">不可见</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="文件管理:">
              <RadioGroup v-model="permission.child.file_upload" style="margin-right:50px">
                <Radio label="1">可上传</Radio>
                <Radio label="0">不可上传</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.file_delete" style="margin-right:50px">
                <Radio label="1">可删除</Radio>
                <Radio label="0">不可删除</Radio>
              </RadioGroup>
            </FormItem>
          </template>
          <template>
            <Divider dashed>导航管理</Divider>
            <FormItem label="主权限:">
              <RadioGroup v-model="permission.parent.aws_steering" style="margin-right:50px">
                <Radio label="1">可见</Radio>
                <Radio label="0">不可见</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="导航管理:">
              <RadioGroup v-model="permission.child.steering_add" style="margin-right:50px">
                <Radio label="1">可添加</Radio>
                <Radio label="0">不可添加</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.steering_delete" style="margin-right:50px">
                <Radio label="1">可删除</Radio>
                <Radio label="0">不可删除</Radio>
              </RadioGroup>
            </FormItem>
          </template>
          <template>
            <Divider dashed>数据服务</Divider>
            <FormItem label="主权限:">
              <RadioGroup v-model="permission.parent.database" style="margin-right:50px">
                <Radio label="1">可见</Radio>
                <Radio label="0">不可见</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="数据服务:">
              <RadioGroup v-model="permission.child.redis_aliyun_view" style="margin-right:50px">
                <Radio label="1">云环境可读</Radio>
                <Radio label="0">云环境不可读</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.redis_create" style="margin-right:50px">
                <Radio label="1">可创建</Radio>
                <Radio label="0">不可创建</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.redis_clear" style="margin-right:98px">
                <Radio label="1">可清理</Radio>
                <Radio label="0">不可清理</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.redis_delete" style="margin-right:50px">
                <Radio label="1">可删除</Radio>
                <Radio label="0">不可删除</Radio>
              </RadioGroup>
            </FormItem>
          </template>
          <template>
            <Divider dashed>发布服务</Divider>
            <FormItem label="主权限:">
              <RadioGroup v-model="permission.parent.project" style="margin-right:50px">
                <Radio label="1">可见</Radio>
                <Radio label="0">不可见</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="部署设置:">
              <RadioGroup v-model="permission.child.deploy_config" style="margin-right:50px">
                <Radio label="1">可见</Radio>
                <Radio label="0">不可见</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="环境权限:">
              <CheckboxGroup v-model="permission.child.deploy_env">
                <Checkbox v-for="(item, index) in all_envs" :key="index" :label=item></Checkbox>
              </CheckboxGroup>
            </FormItem>
            <FormItem label="发布服务:">
              <RadioGroup v-model="permission.child.deploy_view" style="margin-right:50px">
                <Radio label="1">可读</Radio>
                <Radio label="0">不可读</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.deploy_create" style="margin-right:50px">
                <Radio label="1">可创建</Radio>
                <Radio label="0">不可创建</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.deploy_build" style="margin-right:50px">
                <Radio label="1">可构建</Radio>
                <Radio label="0">不可构建</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.deploy_update" style="margin-right:26px">
                <Radio label="1">可修改</Radio>
                <Radio label="0">不可修改</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.deploy_delete" style="margin-right:50px">
                <Radio label="1">可删除</Radio>
                <Radio label="0">不可删除</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.deploy_history_view" style="margin-right:20px">
                <Radio label="1">可查看历史构建</Radio>
                <Radio label="0">不可查看历史构建</Radio>
              </RadioGroup>
            </FormItem>
          </template>
          <template>
            <Divider dashed>镜像管理</Divider>
            <FormItem label="主权限:">
              <RadioGroup v-model="permission.parent.image" style="margin-right:50px">
                <Radio label="1">可见</Radio>
                <Radio label="0">不可见</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="镜像管理:">
              <RadioGroup v-model="permission.child.push_view" style="margin-right:50px">
                <Radio label="1">可读</Radio>
                <Radio label="0">不可读</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.push_oprate" style="margin-right:30px">
                <Radio label="1">可推送</Radio>
                <Radio label="0">不可推送</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.push_record_view" style="margin-right:50px">
                <Radio label="1">可查看记录</Radio>
                <Radio label="0">不可查看记录</Radio>
              </RadioGroup>
            </FormItem>
          </template>
          <template>
            <Divider dashed>应用管理</Divider>
            <FormItem label="主权限:">
              <RadioGroup v-model="permission.parent.application" style="margin-right:50px">
                <Radio label="1">可见</Radio>
                <Radio label="0">不可见</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="应用环境:">
              <RadioGroup v-model="permission.child.env_view" style="margin-right:50px">
                <Radio label="1">可读</Radio>
                <Radio label="0">不可读</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.env_create" style="margin-right:50px">
                <Radio label="1">可创建</Radio>
                <Radio label="0">不可创建</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.env_delete" style="margin-right:50px">
                <Radio label="1">可删除</Radio>
                <Radio label="0">不可删除</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="容器组管理:">
              <RadioGroup v-model="permission.child.containers_view" style="margin-right:50px">
                <Radio label="1">可读</Radio>
                <Radio label="0">不可读</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.containers_restart" style="margin-right:50px">
                <Radio label="1">可重启</Radio>
                <Radio label="0">不可重启</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.containers_delete" style="margin-right:50px">
                <Radio label="1">可删除</Radio>
                <Radio label="0">不可删除</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="服务发现:">
              <RadioGroup v-model="permission.child.router_view" style="margin-right:50px">
                <Radio label="1">可读</Radio>
                <Radio label="0">不可读</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.router_create" style="margin-right:50px">
                <Radio label="1">可创建</Radio>
                <Radio label="0">不可创建</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.router_delete" style="margin-right:50px">
                <Radio label="1">可删除</Radio>
                <Radio label="0">不可删除</Radio>
              </RadioGroup>
            </FormItem>
          </template>
          <template>
            <Divider dashed>线上管理</Divider>
            <FormItem label="主权限:">
              <RadioGroup v-model="permission.parent.production" style="margin-right:50px">
                <Radio label="1">可见</Radio>
                <Radio label="0">不可见</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="集群权限:">
              <RadioGroup v-model="permission.child.production_stg_view" style="margin-right:50px">
                <Radio label="1">STG可读</Radio>
                <Radio label="0">STG不可读</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.production_prod_view" style="margin-right:50px">
                <Radio label="1">Prod可读</Radio>
                <Radio label="0">Prod不可读</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="集群管理:">
              <RadioGroup v-model="permission.child.namespace_view" style="margin-right:50px">
                <Radio label="1">可读</Radio>
                <Radio label="0">不可读</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.namespace_create" style="margin-right:50px">
                <Radio label="1">可创建</Radio>
                <Radio label="0">不可创建</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.namespace_delete" style="margin-right:50px">
                <Radio label="1">可删除</Radio>
                <Radio label="0">不可删除</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="部署管理:">
              <RadioGroup v-model="permission.child.deployment_view" style="margin-right:50px">
                <Radio label="1">可读</Radio>
                <Radio label="0">不可读</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.deployment_deploy" style="margin-right:50px">
                <Radio label="1">可发布</Radio>
                <Radio label="0">不可发布</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.deployment_create" style="margin-right:50px">
                <Radio label="1">可创建</Radio>
                <Radio label="0">不可创建</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.deployment_backend" style="margin-right:26px">
                <Radio label="1">可回滚</Radio>
                <Radio label="0">不可回滚</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.deployment_delete" style="margin-right:50px">
                <Radio label="1">可删除</Radio>
                <Radio label="0">不可删除</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="Pod管理:">
              <RadioGroup v-model="permission.child.pods_view" style="margin-right:50px">
                <Radio label="1">可读</Radio>
                <Radio label="0">不可读</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.pods_restart" style="margin-right:50px">
                <Radio label="1">可重启</Radio>
                <Radio label="0">不可重启</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="服务管理:">
              <RadioGroup v-model="permission.child.service_view" style="margin-right:50px">
                <Radio label="1">可读</Radio>
                <Radio label="0">不可读</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.service_create" style="margin-right:50px">
                <Radio label="1">可创建</Radio>
                <Radio label="0">不可创建</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.service_delete" style="margin-right:50px">
                <Radio label="1">可删除</Radio>
                <Radio label="0">不可删除</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="路由管理:">
              <RadioGroup v-model="permission.child.ingress_view" style="margin-right:50px">
                <Radio label="1">可读</Radio>
                <Radio label="0">不可读</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.ingress_create" style="margin-right:50px">
                <Radio label="1">可创建</Radio>
                <Radio label="0">不可创建</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.ingress_delete" style="margin-right:50px">
                <Radio label="1">可删除</Radio>
                <Radio label="0">不可删除</Radio>
              </RadioGroup>
            </FormItem>
            <!-- <FormItem label="配置管理:">
              <RadioGroup v-model="permission.child.config_view" style="margin-right:50px">
                <Radio label="1">可读</Radio>
                <Radio label="0">不可读</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.config_refresh" style="margin-right:50px">
                <Radio label="1">可刷新</Radio>
                <Radio label="0">不可刷新</Radio>
              </RadioGroup>
              <RadioGroup v-model="permission.child.config_level" style="margin-right:50px">
                <Radio label="1">可更改</Radio>
                <Radio label="0">不可更改</Radio>
              </RadioGroup>
            </FormItem> -->
          </template>
          <template>
            <Divider dashed>系统管理</Divider>
            <FormItem label="主权限:">
              <RadioGroup v-model="permission.parent.system" style="margin-right:50px">
                <Radio label="1">可见</Radio>
                <Radio label="0">不可见</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="系统设置:">
              <RadioGroup v-model="permission.child.sysconfig_view" style="margin-right:50px">
                <Radio label="1">可见</Radio>
                <Radio label="0">不可见</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="用户管理:">
              <RadioGroup v-model="permission.child.user_view" style="margin-right:50px">
                <Radio label="1">可见</Radio>
                <Radio label="0">不可见</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="权限组:">
              <RadioGroup v-model="permission.child.user_group_view" style="margin-right:50px">
                <Radio label="1">可见</Radio>
                <Radio label="0">不可见</Radio>
              </RadioGroup>
            </FormItem>
          </template>
        </Form>
      </div>
    </Modal>
    <Table border :columns="columns" :data="data">
      <template slot-scope="{ row, index }" slot="index">
        <span>{{index+1}}</span>
      </template>
      <template slot-scope="{ row, index }" slot="status">
        <span v-if="`${row.status}`=='Terminating'" style="color:#ed4014">正在删除...</span>
        <span v-else style="color:#19be6b">正在运行</span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="success" size="small" @click="update(index)">查看/修改</Button>
        <Button type="error" size="small" @click="remove(index)" style="margin-left: 10px">删除</Button>
      </template>
    </Table>
  </Card>
</template>

<script>
  import { authGroupList, authGroupCreate } from '@/api/sysconfig'
  import { authGroupDelete, authGroupUpdate } from '@/api/sysconfig'
  import { deployConfEnvsDetail } from '@/api/deploy'
  const structure = {
    parent: {
      work_order: '1',
      files: '0',
      aws_steering: '1',
      database: '1',
      project: '1',
      image: '0',
      application: '1',
      production: '0',
      logs: '1',
      system: '0'
    },
    child: {
      work_order_view: '0',
      work_order_audit: '0',
      work_order_create: '1',
      work_order_delete: '1',
      file_view: '0',
      file_upload: '0',
      file_delete: '0',
      steering_add: '0',
      steering_delete: '0',
      redis_aliyun_view: '0',
      redis_create: '0',
      redis_clear: '0',
      redis_delete: '0',
      deploy_config: '0',
      deploy_env: [],
      deploy_view: '1',
      deploy_create: '0',
      deploy_build: '1',
      deploy_update: '0',
      deploy_delete: '0',
      deploy_history_view: '1',
      push_view: '0',
      push_oprate: '0',
      push_record_view: '0',
      env_view: '1',
      env_create: '0',
      env_delete: '0',
      containers_view: '1',
      containers_restart: '1',
      containers_delete: '1',
      router_view: '1',
      router_create: '1',
      router_delete: '1',
      production_uat_view: '0',
      production_prod_view: '0',
      namespace_view: '1',
      namespace_create: '0',
      namespace_delete: '0',
      deployment_view: '1',
      deployment_create: '0',
      deployment_delete: '0',
      deployment_deploy: '1',
      deployment_backend: '1',
      service_view: '1',
      service_delete: '0',
      service_create: '0',
      ingress_view: '1',
      ingress_create: '0',
      ingress_delete: '0',
      pods_view: '1',
      pods_restart: '0',
      config_view: '0',
      config_level: '1',
      config_refresh: '1',
      sysconfig_view: '0',
      user_group_view: '0',
      user_view: '0',
    }
  }
  export default {
    data () {
      return {
        view_title: '',
        update_data_id: '',
        createModal: false,
        update_status: false,
        permission: structure,
        addAuthGroupForm: {
          groupname: ''
        },
        envs: [],
        columns: [
          {
            title: '序号',
            slot: 'index',
            width: '150',
            align: 'center'
          },
          {
            title: '权限组',
            key: 'auth_group'
          },
          {
            title: '创建日期',
            key: 'create_time'
          },
          {
            title: '更新日期',
            key: 'update_time'
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center'
          }
        ],
        data: [],
        all_envs: []
      }
    },
    methods: {
      cluster_envs () {
        // 获取所有环境
        deployConfEnvsDetail().then(res => {
          var envs_data = res.data.results
          for (var service_type in envs_data) {
            this.all_envs.push(envs_data[service_type].name)
            // this.all_envs.push({'value':envs_data[service_type].name,'label':envs_data[service_type].label})
          }
        })
      },
      // 获取缓存数据
      data_list () {
        authGroupList().then(res => {
          this.data = res.data.results
        });
      },
      createView () {
        this.view_title = "新建权限组";
        this.update_status = false;
        this.createModal = true;
        this.addAuthGroupForm.groupname = '';
        this.permission = structure;
      },
      closeView (name) {
        this.createModal = false;
        this.handleReset(name);
      },
      addAuthGroup () {
        // 请求后端接口创建数据
        // this.permission.child.deploy_env = this.select_envs;
        var data = {
          'auth_group': this.addAuthGroupForm.groupname,
          'permissions': JSON.stringify(this.permission)
        }
        if (this.update_status) {
          authGroupUpdate(this.update_data_id,data).then(res => {
            this.data_list()
            this.$Message.success("修改成功")
          }).catch(err => {
            this.$Message.error("修改失败")
          })
        } else {
          authGroupCreate(data).then(res => {
            this.data_list()
            this.$Message.success("权限组创建成功")
          }).catch(err => {
            this.$Message.error("权限组创建失败")
          })
        }
      },
      // 更新权限
      update (index) {
        this.view_title = '修改权限组';
        this.update_status = true;
        this.createModal = true;
        this.update_data_id = this.data[index].id
        this.addAuthGroupForm.groupname = this.data[index].auth_group;
        this.permission = JSON.parse(this.data[index].permissions);
        this.permission.child.deploy_env = JSON.parse(this.data[index].permissions).child.deploy_env
      },
      // 删除
      remove (index) {
        this.$Modal.confirm({
          title: "警告!",
          content: `<p>删除${this.data[index].auth_group}后会导致关联用户无法正常访问相关功能及页面，是否继续？</p>`,
          onOk: () => {
            authGroupDelete(this.data[index].id).then(res => {
              this.data_list()
              this.$Message.success({content:'删除成功!',duration: 5,closable: true})
            }).catch(err => {
              this.$Message.error({content:'删除失败!',duration: 5,closable: true})
            })
          },
          onCancel: () => {
            this.$Message.info('已取消删除');
          }
        })
      },
    },
    created () {
      this.cluster_envs();
      this.data_list();
    }
  }
</script>